require(['config'], function () {
    require(['jquery'], function () {
        $('#footer').load('footer.html');
        require(['jquery-cookie'], function () {
            function init() {

                //详情页取元素
                this.$picbig = $('.picBig');
                this.$piclist = $('.picList');
                this.$bf = $('.bf');
                this.$path = $('.crumbs');
                this.$picpreview = $('.picPreview');
                this.$goTop = $('.goTop');
                this.$addcart = $('.addcart');
                this.$spinner = $('input.spinner');
                this.$decrease = $('.decrease');
                this.$increase = $('.increase');
                this.$totlenum = $('.totleNum');
                this.$totleprice = $('.totlePrice');
                this.$shopbtn=$('.shoppingBtn a');
                this.$catalogs=$('.catalogs');
                this.$catalogslist=$('.catalogsList');
                let id = location.search.substring(1).split('=')[1];
                let _this = this;

                //ajax取数据 渲染
                const phpurl = 'http://10.31.155.44/02/yiguo/php/';
                // const phpurl = ' http://10.31.155.44/02/git/fkc/yiguo/php/';
                //渲染
                this.render = function () {
                    $.when($.ajax({
                        url: phpurl + 'details.php',
                        data: { id: id },
                        dataType: 'json'
                    }), $.ajax({
                        url: phpurl + 'goodlist.php',
                        dataType: 'json'
                    })).done(function (data, dataprice) {
                        // 取urls取图片数组
                        let urls = data[0].urls.split(',');
                        let strhtml = `<img width="500" height="500" src="${urls[0]}"><div class="sf"></div>`;
                        _this.$picbig.html(strhtml);
                        _this.$bf.html(`<img width="1500" height="1500" style="position:absolute"  src="${urls[0]}">`);
                        strhtml = '<ul>';
                        for (let i = 0; i < urls.length; i++) {
                            strhtml += `
                            <li class="">
                                <img width="85" height="85" src="${urls[i]}">
                            </li>
                            `;
                        }
                        strhtml += '</ul>';
                        _this.$piclist.html(strhtml);

                        strhtml = `
                        <a href="javascript:;">首页</a>
                        &gt;
                        <a href="javascript:;">${data[0].path}</a>&gt;
                        <a href="avascript:;">${data[0].descript}</a>
                        &gt; ${data[0].title}
                        `;

                        _this.$path.html(strhtml);//渲染路径
                        $('.summaryName h1').html(data[0].title);//渲染标题
                        $('.summaryName p').html(data[0].stitle);//渲染描述
                        $('.price').html(data[0].price);//渲染价格
                        $('.comments').html(`(评论数${data[0].sellnum})`);//渲染评论数

                        // 执行
                        _this.bigger();
                        _this.picswitch();
                        _this.rendcart(dataprice[0][1]);
                        _this.dataprice = dataprice[0][1];
                    });
                }
                //放大镜
                this.bigger = function () {
                    this.$sf = $('.sf');
                    this.$picbig.hover(function () {
                        _this.$sf.css({ 'visibility': 'visible' });
                        _this.$bf.css({ 'visibility': 'visible' });
                    }, function () {
                        _this.$sf.css({ 'visibility': 'hidden' });
                        _this.$bf.css({ 'visibility': 'hidden' });
                    })
                    //预设比例
                    let bili = 3;
                    // 小放宽高
                    this.$sf.width(_this.$picbig.width() / bili);
                    this.$sf.height(_this.$picbig.height() / bili);
                    //移动
                    this.$picbig.on('mousemove', function (ev) {
                        var ev = ev || window.event;
                        let top = ev.pageY - _this.$picpreview.offset().top - _this.$sf.height() / 2;
                        let left = ev.pageX - _this.$picpreview.offset().left - _this.$sf.width() / 2;
                        if (left <= 0) {
                            left = 0;
                        } else if (left >= _this.$picbig.width() - _this.$sf.width()) {
                            left = _this.$picbig.width() - _this.$sf.width();
                        }

                        if (top <= 0) {
                            top = 0;
                        } else if (top >= _this.$picbig.height() - _this.$sf.height()) {
                            top = _this.$picbig.height() - _this.$sf.height();
                        }
                        _this.$sf.css({
                            top: top,
                            left: left
                        });

                        _this.$bf.children('img').css({
                            top: -top * bili,
                            left: -left * bili
                        });

                    });
                };

                //切换图片
                this.picswitch = function () {
                    this.$picli = $('.picList li');
                    this.$picli.on('mouseover', function () {
                        $(this).addClass('on').siblings('li').removeClass('on');
                        _this.$picbig.children('img').attr({ src: $(this).children('img').attr('src') });
                        _this.$bf.children('img').attr({ src: $(this).children('img').attr('src') });
                    });
                }

                //加入购物车
                this.addcart = function () {
                    let idarr = []; //存放sid 
                    let numarr = []; //存放数量

                    if ($.cookie('cookieid') && $.cookie('cookienum')) {
                        idarr = $.cookie('cookieid').split(',');
                        numarr = $.cookie('cookienum').split(',');
                    }

                    this.$addcart.on('click', function () {
                        if (idarr.indexOf(id) !== -1) { //第二次只需要数量累加
                            let index = idarr.indexOf(id)
                            numarr[index] = parseInt(numarr[index]) + parseInt(_this.$spinner.val());
                            $.cookie('cookienum', numarr.toString(), { expires: 7 });
                        } else { //第一次加入购物车，创建商品列表
                            idarr.push(id);
                            $.cookie('cookieid', idarr.toString(), { expires: 7 });
                            numarr.push(_this.$spinner.val());
                            $.cookie('cookienum', numarr.toString(), { expires: 7 });
                        }
                        _this.rendcart(_this.dataprice);
                        alert('商品添加成功');
                    });
                    this.$decrease.on('click', function () {
                        _this.$spinner.val(Number(_this.$spinner.val()) - 1);
                        _this.disable();
                    });
                    this.$increase.on('click', function () {
                        _this.$spinner.val(Number(_this.$spinner.val()) + 1);
                        _this.disable();
                    });
                    this.$spinner.on('input', function () {
                        _this.disable();
                    });
                    this.disable = function () {
                        if (this.$spinner.val() > 1) {
                            this.$decrease.removeAttr('disabled');
                        } else {
                            this.$decrease.attr({ 'disabled': 'disabled' });
                            this.$spinner.val(1);
                        }
                        if (this.$spinner.val() < 99) {
                            this.$increase.removeAttr('disabled');
                        } else {
                            this.$increase.attr({ 'disabled': 'disabled' });
                            this.$spinner.val(99);
                        }
                    }
                }

                //取cookie渲染购物车
                this.rendcart = function (database) {
                    if ($.cookie('loginname')) {
                        if ($.cookie('cookieid') && $.cookie('cookienum')) {
                            var idarr = $.cookie('cookieid').split(',');
                            var numarr = $.cookie('cookienum').split(',');
                            var count = 0;
                            var num = 0;
                            for (let i = 0; i < idarr.length; i++) {
                                for (let value of database) {
                                    if (value.id == idarr[i]) {
                                        num += numarr[i];
                                        count += value.price * 100 * numarr[i];
                                        break;
                                    }
                                }
                            }
                            this.$totlenum.children('b').html(Number(num));

                            this.$totleprice.html(count / 100 + '￥');
                        };
                    } else {
                        this.$shopbtn.on('click', function () {
                            return false;
                        })
                    }
                };

                //回顶
                this.$goTop.on('click', function () {
                    $('html,body').animate({
                        scrollTop: 0
                    });
                });

                //nav
                this.$catalogs.hover(function(){
                    _this.$catalogslist.show();
                },function(){
                    _this.$catalogslist.hide();
                });               

                // 执行
                this.render();
                this.addcart();
            }
            init();
        });
    });
});
